<template>
  <view class="container">
    <view class="body1">
      <view class="item1" @click="gotoOrderDetail">
        <view class="item-issue-time1">联系时间：{{userDetail.createTime}}</view>
        <view class="item-box1">
          <text class="contact-people">联系人：{{userDetail.userName}}</text>
          <view class="contact-people" @click="getContactPhone">
            <text> 联系电话：{{userDetail.phone}}</text>
            <!-- <uni-icons type="phone" color="#FC4710"></uni-icons> -->

          </view>
          <text class="contact-people">物品类型：{{userDetail.materialType}}</text>
          <view class="item-main1">
            <image src="/static/images/Group48097783@2x.png" mode=""></image>
            <view class="item-userinfo1">
              <text>{{userDetail.departure}}</text>
              <text>{{userDetail.phone}}</text>
            </view>
          </view>
          <image class="middle-image" src="/static/images/Group2650@2x.png" mode=""></image>
          <view class="item-main1">
            <image src="/static/images/Group2648@2x.png" mode=""></image>
            <view class="item-userinfo1">
              <text>{{userDetail.destination}}</text>
              <!-- <text>13711111111</text> -->
            </view>
          </view>
          <text class="contact-people" style="margin-top: 20rpx;">备注：里面时速冻食品</text>
        </view>
      </view>
    </view>
    <view style="margin-top: 80rpx;">
      <FooterBottom v-if="isShowJieDan" title="接单" @onclick="getContactPhone"></FooterBottom>
      <FooterBottom v-else title="已接单"></FooterBottom>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userDetail: {},
        isShowJieDan: '',
        targetUserId: '',
        id: ''
      };
    },
    onLoad({
      id
    }) {
      if (id) {
        this.id = id
      }
      this.getUserDetail(this.id)
    },
    onShow() {},
    methods: {
      async getUserDetail(id) {
        const res = await uni.gRequest.get(`/app/demand/${id}`)
        this.userDetail = res.data
        this.targetUserId = res.data.userId
        this.isShowJieDan = res.data.showFlag != 1 && res.data.unlockFlag == 2 && res.data.phone
      },
      getContactPhone() {
        uni.showModal({
          title: '温馨提示',
          content: '接单需要付费解锁哦~',
          cancelColor: '#666666',
          confirmText: '立即付费',
          confirmColor: '#FC470F',
          success: (res) => {
            console.log(res);
            if (res.confirm) {
              uni.navigateTo({
                url: `/pages/order_pay/order_pay?targetUserId=${this.targetUserId}&id=${this.id}&isShiji=1`
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .body1 {
    background-color: white;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    margin-top: -40rpx;
  }

  .container {
    height: 100%;
  }

  .item1 {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;


    .item-issue-time1 {
      padding: 0 0 40rpx;
      border-bottom: 1rpx #999 dotted;
      margin-bottom: 20rpx;
    }

    .contact-people {
      // display: block;
      padding: 20rpx 0 20rpx;
      font-size: 26rpx;
      color: #000000;
      display: flex;
      justify-content: space-between;

      .uni-icon {
        font-size: 34rpx;
        margin-right: 20rpx;
      }
    }

    .item-main1 {
      font-size: 26rpx;
      color: #000000;
      display: flex;
      align-items: center;
      padding: 6rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }

      .item-userinfo1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 20rpx;
        color: #999999;

        text:first-child {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }

  .middle-image {
    width: 15rpx;
    height: 25rpx;
    margin-left: 13rpx
  }
</style>
